<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/购物车.css">
    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <script src="/static/js/购物车.js"></script>
</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-dark bg-dark fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar"
                 viewBox="0 0 16 16">
                <path
                        d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z" />
            </svg>
            首页
        </a>
        <a class="navbar-brand" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                 class="bi bi-newspaper" viewBox="0 0 16 16">
                <path
                        d="M0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v10.528c0 .3-.05.654-.238.972h.738a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 1 1 0v9a1.5 1.5 0 0 1-1.5 1.5H1.497A1.497 1.497 0 0 1 0 13.5zM12 14c.37 0 .654-.211.853-.441.092-.106.147-.279.147-.531V2.5a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5v11c0 .278.223.5.497.5z" />
                <path
                        d="M2 3h10v2H2zm0 3h4v3H2zm0 4h4v1H2zm0 2h4v1H2zm5-6h2v1H7zm3 0h2v1h-2zM7 8h2v1H7zm3 0h2v1h-2zm-3 2h2v1H7zm3 0h2v1h-2zm-3 2h2v1H7zm3 0h2v1h-2z" />
            </svg>
            资讯
        </a>
        <a class="navbar-brand" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                 class="bi bi-journal-text" viewBox="0 0 16 16">
                <path
                        d="M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5" />
                <path
                        d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2" />
                <path
                        d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1z" />
            </svg>
            名录
        </a>
        <a class="navbar-brand" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye"
                 viewBox="0 0 16 16">
                <path
                        d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z" />
                <path
                        d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" />
            </svg>
            展览
        </a>
        <a class="navbar-brand" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-book"
                 viewBox="0 0 16 16">
                <path
                        d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783" />
            </svg>
            百科
        </a>
        <a class="navbar-brand" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                 class="bi bi-file-earmark" viewBox="0 0 16 16">
                <path
                        d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z" />
            </svg>
            公约
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar"
                aria-controls="offcanvasDarkNavbar" aria-label="切换导航">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar"
             aria-labelledby="offcanvasDarkNavbarLabel">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">我的</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
                        aria-label="关闭"></button>
            </div>
            <div class="offcanvas-body">
                <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">在线客服</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">意见反馈</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                           aria-expanded="false">订单</a>
                        <ul class="dropdown-menu dropdown-menu-dark">
                            <li><a class="dropdown-item" href="#">购物车</a></li>
                            <li><a class="dropdown-item" href="#">订单详情</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                           aria-expanded="false">账号管理</a>
                        <ul class="dropdown-menu dropdown-menu-dark">
                            <li><a class="dropdown-item" href="#">登录/注册</a></li>
                            <li><a class="dropdown-item" href="#">修改密码</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>
<!-- 主内容区 -->
<div class="container mt-5 pt-4">
    <!-- 面包屑导航 -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="文创商城.html">文创商城</a></li>
            <li class="breadcrumb-item active" aria-current="page">购物车</li>
        </ol>
    </nav>

    <!-- 购物车标题 -->
    <h2 class="mb-4"><i class="bi bi-cart3"></i> 我的购物车</h2>

    <!-- 购物车表格 -->
    <div class="cart-table mb-5">
        <div class="table-responsive">
            <table class="table">
                <thead>
                <tr>
                    <th ><input type="checkbox" class="form-check-input" id="selectAll"></th>
                    <th >图片</th>
                    <th >商品</th>
                    <th >价格</th>
                    <th >数量</th>
                    <th >小计</th>
                    <th >操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td><input type="checkbox" class="form-check-input item-checkbox"></td>
                    <td>
                        <img src="/static/img/轮播图图片01.jpeg" alt="商品图片" class="img-thumbnail" style="width: 70px;">
                    </td>
                    <td>全栈浮月 床头小摆件</td>
                    <td>¥199.0</td>
                    <td>
                        <div class="input-group quantity-selector">
                            <button class="btn btn-outline-secondary minus">-</button>
                            <input type="number" class="form-control text-center" value="2" min="1">
                            <button class="btn btn-outline-secondary plus">+</button>
                        </div>
                    </td>
                    <td>¥398.0</td>
                    <td>
                        <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i> 删除</button>
                    </td>
                </tr>

                </tbody>
            </table>
        </div>
    </div>

    <!-- 优惠信息 -->
    <div class="discount-info mb-4 p-4 bg-light rounded">
        <h5><i class="bi bi-gift"></i> 您心仪的商品享有优惠</h5>
        <div class="row">
            <div class="col-md-6">
                <p>赠送积分：<span class="text-primary">398.0</span></p>
            </div>
            <div class="col-md-6 text-end">
                <p>商品金额：<span class="fw-bold">¥998.0元</span></p>
            </div>
        </div>
    </div>

    <!-- 操作按钮 -->
    <div class="cart-actions mb-5">
        <div class="d-flex justify-content-between">
            <button class="btn btn-outline-secondary"><i class="bi bi-trash"></i> 清空购物车</button>
            <button class="btn btn-primary"><i class="bi bi-check-circle"></i> 提交订单</button>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="footer mt-5 py-4" style="background: #2A3547; color: #F8F4E9;">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <h5 class="footer-title">关于我们</h5>
                <p>传承中华文化，创新文创设计</p>
            </div>
            <div class="col-md-4">
                <h5 class="footer-title">联系方式</h5>
                <p><a href="客服.html">联系我们</a> </p>
                <p>Email: service@wenchuang.com</p>
            </div>
            <div class="col-md-4">
                <h5 class="footer-title">关注我们</h5>
                <div class="social-icons">
                    <img src="../img/抖音图标.jpg" height="25" width="25"/></div>
                <p>123456789</p>
            </div>
        </div>
        <div class="text-center mt-3 pt-3" style="border-top: 1px solid #7B9EA8;">
            <p>©四川非遗版权所有</p>
        </div>
    </div>
</footer>
    <!-- 支付模态框 -->
    <div class="modal fade" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="paymentModalLabel">选择支付方式</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <!-- 支付方式选择 -->
                        <div class="col-md-4">
                            <div class="payment-amount mb-4 p-3 bg-light rounded">
                                <h4>支付金额: <span class="text-danger">¥398.0</span></h4>
                            </div>

                            <div class="list-group">
                                <a href="#" class="list-group-item list-group-item-action active" data-method="alipay">
                                    <img src="../img/支付宝支付.jpg" alt="支付宝" width="80"><P>支付宝支付</P>
                                </a>
                                <a href="#" class="list-group-item list-group-item-action" data-method="wechatpay">
                                    <img src="../img/微信支付.jpg" alt="微信支付" width="80"><p>微信支付</p>
                                </a>
                                <a href="#" class="list-group-item list-group-item-action" data-method="bankcard">
                                    <i class="bi bi-credit-card"></i> 银行卡支付
                                </a>
                            </div>
                        </div>

                        <!-- 二维码支付区域 -->
                        <div class="col-md-8">
                            <div class="qr-payment-area text-center p-4">
                                <div class="payment-method-title mb-3">
                                    <h4><span id="currentMethod">支付宝</span>扫码支付</h4>
                                </div>
                                <div class="qr-code-container mb-3">
                                    <!-- 这里放置动态生成的二维码 -->
                                    <img id="qrCodeImage" src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://alipay.com/pay?amount=398.0"
                                         alt="支付二维码" class="img-fluid">
                                </div>
                                <div class="payment-instructions">
                                    <p id="paymentInstructions">
                                        请使用支付宝扫描二维码完成支付
                                    </p>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text">订单号</span>
                                        <input type="text" class="form-control" value="WC202311245678" readonly>
                                        <button class="btn btn-outline-secondary" type="button" id="copyOrderNum">
                                            <i class="bi bi-clipboard"></i> 复制
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消支付</button>
                    <div class="payment-status">
                        <span class="text-success d-none" id="paymentSuccess"><i class="bi bi-check-circle-fill"></i> 支付成功</span>
                        <span class="text-danger d-none" id="paymentFailed"><i class="bi bi-x-circle-fill"></i> 支付失败</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
</body>
</html>